<template>
  <dd
    class="q-item"
    :class="{
      'selected-item': question.UserAnswer.length > 0 || question.QuestionTypeId === 5,
      'error-item': (showCorrectness || question.state) && question.IsRight === 2 }"
    @click="goCertainQuestion"
  >
    {{ question.Sequence }}
  </dd>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    question: {
      type: Object,
      default: () => ({}),
    },
    qIndex: {
      type: Number,
      default: 0,
    },
    isResultPage: {
      type: Boolean,
      default: false,
    },
    showCorrectness: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    goCertainQuestion () {
      window.questionIndex = this.qIndex
      if (this.isResultPage) {
        this.$router.push({ name: 'examTest',
          query: {
            ...this.$route.query,
            showAnswer: '1',
            fromApp: '',
          },
        })
      } else {
        this.$router.back()
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.q-item {
  display: inline-block;
  text-align: center;
  line-height: 60px;
  height: 60px;
  width: 60px;
  font-size: 31px;
  border-radius: 50%;
  // border: 1px solid #eee;
  @include px1border(all, #eee);
  color: $primary-app;
  margin: 5px 29px 25px;
}
.selected-item {
  border-color: $primary-app;
  color: #fff;
  background-color: $primary-app;
}
.error-item {
  border-color: $error-app;
  background: $error-app;
}
</style>
